<template>
<div id="main" ref="main" style="width: 600px;height:400px;"></div>
    
<div id="main_1"  style="width: 600px;height:400px;"></div>

</template>
<script setup>
import HuiCharts from '@opentiny/huicharts';
import {ref, getCurrentInstance, onMounted, reactive} from 'vue';


const pie = ()=>{
// 初始化图表容器
let chartIns = new HuiCharts();
let chartContainerDom = document.getElementById('main');
chartIns.init(chartContainerDom);

// 填入图表配置项
let chartOption = {
    theme: 'hdesign-light',
    type: 'pie', 
    selectedMode: 'multiple',
    legend: {
        show: false,
    },
    color:['#F69E39','#BD72F0','#54BCCE','#E61866'],
    data: [
        { value: 100, name: 'VPC' },
        { value: 90, name: 'IM' },
        { value: 49, name: 'EIP' },
        { value: 14, name: 'SG' },
    ]

};
// 指定使用图表类型：LineChart、AreaChart、BarChart、PieChart、GaugeChart、RadarChart、ProcessChart、BubbleChart等
// 图表类型的英文名称可以在文档左侧菜单栏看到
let chartType = 'PieChart';
chartIns.setSimpleOption(chartType, chartOption);

// 开始渲染
chartIns.render();
}
const zh = ()=>{
    let chartIns1 = new HuiCharts();
    let chartContainerDom = document.getElementById('main_1');
    chartIns1.init(chartContainerDom);

    // 填入图表配置项
let chartOption = {
    theme: 'hdesign-light',
    padding: [40, 10, 40, 10],
    legend: {
        show: true,          // 图例是否显示
        position: {        
            left:'center',   // 图例在容器中的上下左右的位置
            right: 25,
            top: 15
        },
        orient: 'horizontal', // 图例排布方向

        data: [
            {name:'aaa'},
            {name:'bbb'}
        ]
       
    },
    data: [
        { 'Month': 'Jan', 'aaa': 100, 'bbb': 37, 'cc': 37 },
        { 'Month': 'Feb', 'aaa': 27, 'bbb': 39, 'cc': 39 },
        { 'Month': 'Mar', 'aaa': 31, 'bbb': 20, 'cc': 20 },
        { 'Month': 'Apr', 'aaa': 30, 'bbb': 15, 'cc': 15 },
        { 'Month': 'May', 'aaa': 37, 'bbb': 13, 'cc': 13 },
        { 'Month': 'Jun', 'aaa': 40, 'bbb': 17, 'cc': 17 }
    ],
    xAxis: {
        data: 'Month',
    },
    yAxis: [
        {
        position: 'left',
        dataName: ['aaa'],
        name: '天（%）',

      },
      {
        position: 'right',
        dataName: ['bbb'],
        name: '年（%）',

      },

    ]

};
// 指定使用图表类型：LineChart、AreaChart、BarChart、PieChart、GaugeChart、RadarChart、ProcessChart、BubbleChart等
// 图表类型的英文名称可以在文档左侧菜单栏看到
let chartType = 'BarChart';
chartIns1.setSimpleOption(chartType, chartOption);

// 开始渲染
chartIns1.render();
}

onMounted(()=>{
    pie();
    zh();

})



</script>
<style lang="scss" scoped>

</style>